<template>
  <div class="header-contanier">
    <div @click="handleLogo">
      {{ title }}
    </div>
    <div v-if="showConfig">
      <a class="button" @click="handleConfig">
        <SettingOutlined />
        系统设置
      </a>
      <a class="button" @click="logout">
        <LogoutOutlined />
        退出登录
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { SettingOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  components: {
    SettingOutlined,
    LogoutOutlined,
  },
  props: {
    showConfig: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    const router = useRouter();

    const handleLogo = () => {
      router.push('/dashboard');
    };

    const handleConfig = () => {
      router.push('/sysConfig');
    };

    const logout = () => {};

    return {
      handleLogo,
      handleConfig,
      logout,
    };
  },
});
</script>

<style lang="less" scoped>
.header-contanier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: @white-color;
  background-color: @box-bg-color;
  height: 76px;
  padding: 0 70px;
}

.logo {
  margin-right: 30px;
}

.button {
  color: rgba(255, 255, 255, 1);
  margin-left: 20px;
}

.button:hover {
  color: rgba(255, 255, 255, 0.8);
}
</style>
